{% extends 'base.html' %}
{% load static %}

{% block title %}通知中心 - 本地有约{% endblock %}

{% block extra_css %}
<style>
    .notification-item {
        background: white;
        border-radius: 0.75rem;
        padding: 1.25rem;
        margin-bottom: 1rem;
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
        cursor: pointer;
        border-left: 4px solid transparent;
    }
    
    .notification-item:hover {
        transform: translateX(5px);
        box-shadow: var(--shadow-md);
    }
    
    .notification-item.unread {
        background: #f0f9ff;
        border-left-color: var(--primary-color);
    }
    
    .notification-icon {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
    }
    
    .notification-icon.system {
        background: var(--gradient-primary);
        color: white;
    }
    
    .notification-icon.activity {
        background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        color: white;
    }
    
    .notification-icon.comment {
        background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        color: white;
    }
    
    .notification-icon.like {
        background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
        color: white;
    }
    
    .notification-icon.follow {
        background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
        color: white;
    }
    
    .notification-icon.points {
        background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
        color: white;
    }
    
    .filter-tabs {
        background: white;
        border-radius: 1rem;
        padding: 1rem;
        box-shadow: var(--shadow-md);
        margin-bottom: 2rem;
    }
</style>
{% endblock %}

{% block content %}
<!-- 页面头部 -->
<div class="page-header">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h1><i class="fas fa-bell"></i> 通知中心</h1>
                <p>查看系统消息和互动通知</p>
            </div>
            <div class="col-md-6 text-md-end">
                <button class="btn btn-light" onclick="markAllAsRead()">
                    <i class="fas fa-check-double"></i> 全部标为已读
                </button>
            </div>
        </div>
    </div>
</div>

<div class="container mb-5">
    <!-- 筛选标签 -->
    <div class="filter-tabs">
        <ul class="nav nav-pills">
            <li class="nav-item">
                <a class="nav-link active" href="#" data-type="" onclick="filterNotifications(''); return false;">
                    全部通知
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="unread" onclick="filterNotifications('unread'); return false;">
                    <i class="fas fa-dot-circle"></i> 未读
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="system" onclick="filterNotifications('system'); return false;">
                    <i class="fas fa-cog"></i> 系统通知
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="activity" onclick="filterNotifications('activity'); return false;">
                    <i class="fas fa-calendar"></i> 活动
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="comment" onclick="filterNotifications('comment'); return false;">
                    <i class="fas fa-comment"></i> 评论
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="like" onclick="filterNotifications('like'); return false;">
                    <i class="fas fa-heart"></i> 点赞
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-type="follow" onclick="filterNotifications('follow'); return false;">
                    <i class="fas fa-user-plus"></i> 关注
                </a>
            </li>
        </ul>
    </div>
    
    <!-- 通知列表 -->
    <div id="notificationsContainer">
        <div class="text-center py-5">
            <div class="loader"></div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="text-center mt-4" id="loadMoreContainer" style="display: none;">
        <button class="btn btn-outline-primary" onclick="loadMore()">
            <i class="fas fa-arrow-down"></i> 加载更多
        </button>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    let notifications = [];
    let currentFilter = '';
    let currentPage = 1;
    let hasMore = true;
    
    // 加载通知列表
    function loadNotifications(page = 1, append = false) {
        const params = { page: page };
        
        if (currentFilter === 'unread') {
            params.is_read = false;
        } else if (currentFilter && currentFilter !== 'unread') {
            params.type = currentFilter;
        }
        
        API.notifications.getList(params)
            .then(response => {
                const data = response.data;
                const newNotifications = data.results || data;
                
                if (append) {
                    notifications = [...notifications, ...newNotifications];
                } else {
                    notifications = newNotifications;
                }
                
                hasMore = !!data.next;
                currentPage = page;
                
                renderNotifications();
                
                // 显示/隐藏加载更多按钮
                const loadMoreBtn = document.getElementById('loadMoreContainer');
                loadMoreBtn.style.display = hasMore ? 'block' : 'none';
            })
            .catch(error => {
                console.error('加载通知失败:', error);
                document.getElementById('notificationsContainer').innerHTML = `
                    <div class="empty-state">
                        <i class="fas fa-exclamation-circle text-danger"></i>
                        <h3>加载失败</h3>
                        <p>请刷新页面重试</p>
                    </div>
                `;
            });
    }
    
    // 渲染通知列表
    function renderNotifications() {
        const container = document.getElementById('notificationsContainer');
        
        if (notifications.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-inbox"></i>
                    <h3>暂无通知</h3>
                    <p>没有新的通知消息</p>
                </div>
            `;
            return;
        }
        
        container.innerHTML = notifications.map(notification => `
            <div class="notification-item ${notification.is_read ? '' : 'unread'}" 
                 onclick="handleNotificationClick(${notification.id})">
                <div class="d-flex align-items-start gap-3">
                    <div class="notification-icon ${notification.type}">
                        ${getNotificationIcon(notification.type)}
                    </div>
                    <div class="flex-grow-1">
                        <div class="d-flex justify-content-between align-items-start mb-1">
                            <h6 class="mb-0">${notification.title}</h6>
                            <small class="text-muted">${formatDate(notification.created_at)}</small>
                        </div>
                        <p class="text-muted mb-0">${notification.content}</p>
                        ${!notification.is_read ? '<span class="badge bg-primary mt-2">新消息</span>' : ''}
                    </div>
                </div>
            </div>
        `).join('');
    }
    
    // 获取通知图标
    function getNotificationIcon(type) {
        const icons = {
            'system': '<i class="fas fa-cog"></i>',
            'activity': '<i class="fas fa-calendar"></i>',
            'comment': '<i class="fas fa-comment"></i>',
            'like': '<i class="fas fa-heart"></i>',
            'follow': '<i class="fas fa-user-plus"></i>',
            'message': '<i class="fas fa-envelope"></i>',
            'points': '<i class="fas fa-coins"></i>',
        };
        return icons[type] || '<i class="fas fa-bell"></i>';
    }
    
    // 处理通知点击
    function handleNotificationClick(notificationId) {
        const notification = notifications.find(n => n.id === notificationId);
        if (!notification) return;
        
        // 标记为已读
        if (!notification.is_read) {
            API.notifications.markAsRead(notificationId)
                .then(() => {
                    notification.is_read = true;
                    renderNotifications();
                    updateUnreadCount();
                })
                .catch(err => console.error('标记失败:', err));
        }
        
        // 跳转到相关页面
        if (notification.link_url) {
            window.location.href = notification.link_url;
        }
    }
    
    // 筛选通知
    function filterNotifications(type) {
        currentFilter = type;
        
        // 更新导航样式
        document.querySelectorAll('.nav-pills .nav-link').forEach(link => {
            link.classList.remove('active');
        });
        event.target.classList.add('active');
        
        loadNotifications(1, false);
    }
    
    // 全部标为已读
    function markAllAsRead() {
        confirmAction('确定要将所有通知标记为已读吗？', () => {
            API.notifications.markAllAsRead()
                .then(() => {
                    showSuccess('已全部标为已读');
                    loadNotifications(1, false);
                    updateUnreadCount();
                })
                .catch(error => {
                    showError('操作失败，请重试');
                });
        });
    }
    
    // 加载更多
    function loadMore() {
        if (hasMore) {
            loadNotifications(currentPage + 1, true);
        }
    }
    
    // 更新未读数量
    function updateUnreadCount() {
        API.notifications.getUnreadCount()
            .then(response => {
                const count = response.data.count;
                const badge = document.getElementById('notification-count');
                if (badge) {
                    if (count > 0) {
                        badge.textContent = count > 99 ? '99+' : count;
                        badge.style.display = 'block';
                    } else {
                        badge.style.display = 'none';
                    }
                }
            })
            .catch(err => console.error('更新未读数量失败:', err));
    }
    
    // 页面加载时加载通知
    document.addEventListener('DOMContentLoaded', () => {
        loadNotifications();
    });
</script>
{% endblock %}
